<script>
export default {
  data() {
    return {
      message: 'helloWorld',
      isActive: true,
      error: null,
      // error: {},给个对象或者数字
      classObj: {
        active: true,
        helloWorld: true,
      },
      activeClass: 'active',
    }
  },
  computed: {
    classObjCom: function () {
      return {
        active: this.isActive && !this.error,
        helloWorld: this.error,
      }
    },
  },
}
</script>

<template>
  <div>
    <!-- 第一种：放置字符串 -->
    <p class="active">hello</p>
    <!-- 第二种：放置对象 -->
    <!-- <p :class="{类名: boolean}">hello2</p> -->
    <p :class="{ active: true }">hello2</p>
    <p :class="{ active: isActive }">hello2</p>
    <p :class="{ active: isActive, helloWorld: isActive }">hello2</p>
    <!-- 和普通的类同时存在，不会冲突。 -->
    <p :class="{ active: isActive }" class="helloWorld">hello2</p>
    <button @click="isActive = !isActive">改变class</button>
    <!-- 直接传入一个对象 -->
    <p :class="classObj">hello3</p>

    <!-- 使用computed -->
    <p :class="classObjCom">hello computed</p>

    <!-- 数组语法(不常用。) -->
    <p :class="[message, activeClass]">hello2</p>

    <!-- 数数和对象的结合。 -->
    <p :class="[message, { active: isActive }]">hello3</p>
  </div>
</template>

<style>
.active {
  font-size: 50px;
  color: red;
}
.helloWorld {
  background-color: pink;
}
</style>
